<template>
  <div
    v-if="isShow"
    ref="dragElem"
    class="float-nav"
    @touchstart="touchstartHandle('dragElem', $event)"
    @touchmove="touchmoveHandle('dragElem', $event)"
  >
    <div class="float-nav-button" @click="showNav = !showNav">
      <img src="@/assets/image/icon_menu.png">
    </div>
    <ul
      class="float-nav-list"
      :class="showNav ? 'enter-animation' : 'leave-animation'"
    >
      <li
        v-for="(item, index) in navList"
        :key="index"
        :style="{
          'background-color': setColor(index),
          'box-shadow': setBoxShadow(index),
        }"
        @click="jumpHandle(item.path)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'FloatNav',
  data() {
    return {
      showNav: false,
      coordinate: {
        client: {},
        elePosition: {}
      },
      isShow: false,
      navBtnColorList: [
        '22,188,131',
        '254,184,29',
        '255,138,138',
        '79,216,211',
        '115,160,250',
        '144,128,6',
        '95,188,255',
        '144,98,153',
        '144,83,17',
        '144,147,153'
      ],
      navList: [
        // { name: "总览", path: "/" },
        // { name: "物流", path: "/logistics" },
        // { name: "制造", path: "/produces" },
        // { name: "销售", path: "/order" },
        // { name: "配送", path: "/delivery" },
        // { name: "软体", path: "/software" },
        // { name: "品质", path: "/quality" },
      ]
    }
  },
  computed: {
    navPerList() {
      return this.$store.getters.navPerList
    }
  },
  watch: {
    $route: {
      handler(to) {
        // 拥有权限的页面小于等于一个时，隐藏整个导航按钮
        if (this.navPerList.length <= 1) {
          this.isShow = false
          return
        }
        // 当前页面非权限页面（一级页面）时，隐藏整个导航按钮
        const pathList = this.navPerList.map((item) => item.path)
        this.isShow = pathList.includes(to.path)
        // 隐藏当前页面的导航按钮
        if (this.isShow) {
          this.navList = this.navPerList.filter(
            (item) => item.path !== to.path
          )
        }
      }
    }
  },
  methods: {
    setColor(index) {
      if (index < this.navBtnColorList.length) {
        return `rgb(${this.navBtnColorList[index]})`
      }
      return `rgb(${
        this.navBtnColorList[index - this.navBtnColorList.length]
      })`
    },
    setBoxShadow(index) {
      if (index < this.navBtnColorList.length) {
        return `0 0 2px 2px rgba(${this.navBtnColorList[index]}, 0.5)`
      }
      return `0 0 2px 2px rgba(${
        this.navBtnColorList[index - this.navBtnColorList.length]
      }, 0.5)`
    },
    jumpHandle(path) {
      this.$router.push(path)
      //   this.showNav = false
    },
    touchstartHandle(refName, e) {
      const element = e.targetTouches[0]
      // 记录点击的坐标
      this.coordinate.client = {
        x: element.clientX,
        y: element.clientY
      }
      // 记录需要移动的元素坐标
      this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
      this.coordinate.elePosition.top = this.$refs[refName].offsetTop
    },
    touchmoveHandle(refName, e) {
      e.preventDefault()
      const element = e.targetTouches[0]
      // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
      let pointX =
                this.coordinate.elePosition.left +
                (element.clientX - this.coordinate.client.x)
      let pointY =
                this.coordinate.elePosition.top +
                (element.clientY - this.coordinate.client.y)
      // 限制可移动距离，不超出可视区域
      pointX =
                pointX <= 0
                  ? 0
                  : pointX >= innerWidth - this.$refs[refName].offsetWidth
                    ? innerWidth - this.$refs[refName].offsetWidth
                    : pointX
      pointY =
                pointY <= 0
                  ? 0
                  : pointY >= innerHeight - this.$refs[refName].offsetHeight
                    ? innerHeight - this.$refs[refName].offsetHeight
                    : pointY
      // 移动当前元素
      this.$refs[refName].style.left = pointX + 'px'
      this.$refs[refName].style.top = pointY + 'px'
    }
  }
}
</script>

<style lang="less" scoped>
.float-nav {
    width: 44px;
    height: 44px;
    position: fixed;
    right: 12px;
    bottom: 120px;
    z-index: 99999;
    &-button {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: #12b9a3;
        box-shadow: 0px 2px 4px 0px rgba(18, 185, 163, 0.3);
        border-radius: 50%;
        > img {
            height: 22px;
        }
    }
    &-list {
        li {
            display: flex;
            align-items: center;
            justify-content: center;
            list-style: none;
            position: absolute;
            left: 2px;
            top: 2px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 12px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            letter-spacing: 1px;
            color: #ffffff;
            animation-duration: 0.3s; // 规定完成动画所花费的时间
            animation-timing-function: linear; // 动画从头到尾的速度是相同的
            animation-fill-mode: forwards; // 当动画完成后，保持最后一个属性值
            animation-iteration-count: 1; // 定义动画的播放次数
        }
    }
    .enter-animation {
        & > li {
            // box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2) !important;
            // box-shadow: 0 0 5px 5px rgba(red, 0.2);
            &:nth-child(1) {
                animation-name: enter1;
            }
            &:nth-child(2) {
                animation-name: enter2;
            }
            &:nth-child(3) {
                animation-name: enter3;
            }
            &:nth-child(4) {
                animation-name: enter4;
            }
            &:nth-child(5) {
                animation-name: enter5;
            }
            &:nth-child(6) {
                animation-name: enter6;
            }
            &:nth-child(7) {
                animation-name: enter7;
            }
            &:nth-child(8) {
                animation-name: enter8;
            }
            &:nth-child(9) {
                animation-name: enter9;
            }
            &:nth-child(10) {
                animation-name: enter10;
            }
            &:nth-child(11) {
                animation-name: enter11;
            }
            &:nth-child(12) {
                animation-name: enter12;
            }
            &:nth-child(13) {
                animation-name: enter13;
            }
        }
    }
    @keyframes enter1 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: -60px;
            right: 0;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes enter2 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: -38px;
            left: -38px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes enter3 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: 1px;
            left: -60px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes enter4 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: 40px;
            left: -38px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes enter5 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: 60px;
            right: 0;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes enter6 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: -110px;
            right: 0;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes enter7 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: -90px;
            left: -40px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes enter8 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: -62px;
            left: -78px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes enter9 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: -20px;
            left: -100px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes enter10 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: 25px;
            left: -100px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes enter11 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: 64px;
            left: -78px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes enter12 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: 90px;
            left: -40px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes enter13 {
        from {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        to {
            top: 110px;
            right: 0;
            opacity: 1;
            transform: scale(1);
        }
    }
    .leave-animation {
        & > li {
            &:nth-child(1) {
                animation-name: leave1;
            }
            &:nth-child(2) {
                animation-name: leave2;
            }
            &:nth-child(3) {
                animation-name: leave3;
            }
            &:nth-child(4) {
                animation-name: leave4;
            }
            &:nth-child(5) {
                animation-name: leave5;
            }
            &:nth-child(6) {
                animation-name: leave6;
            }
        }
    }
    @keyframes leave1 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: -60px;
            right: 0;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes leave2 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: -38px;
            left: -38px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes leave3 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: 1px;
            left: -60px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes leave4 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: 40px;
            left: -38px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes leave5 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: 60px;
            right: 0;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes leave6 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: -110px;
            right: 0;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes leave7 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: -90px;
            left: -40px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes leave8 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: -62px;
            left: -78px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes leave9 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: -20px;
            left: -100px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes leave10 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: 25px;
            left: -100px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes leave11 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: 64px;
            left: -78px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes leave12 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: 90px;
            left: -40px;
            opacity: 1;
            transform: scale(1);
        }
    }
    @keyframes leave13 {
        to {
            top: 2px;
            left: 2px;
            opacity: 0;
            transform: scale(0);
        }
        from {
            top: 110px;
            right: 0;
            opacity: 1;
            transform: scale(1);
        }
    }
}
</style>
